웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
서버에 파일을 업로드, 올리기 위한 방법을 알아보려합니다. 만약 올릴 파일의 개수가 한개가 아닌 다수의 파일인 경우 어떻게해야 복수 파일 업로드가 가능한지 함께 알아보도록 하겠습니다.
이와 함께 복수 파일의 경우 드래그앤드랍 방식의 인터페이스를 구현한다면 사용자가 더욱 편하게 업로드를 수행할 수 있을 것입니다. 만약 드래그를 구현하기 위해서 생각할 부분도 함께 알아보겠습니다. 우선 파일을 서버에 올리기위해서 화면 앞단에서느 무엇을 해야할까요?
# 다수의 파일 한번에 업로드하기 위한 방법 아래에서는 파일을 웹페이지에 선택하는 것부터 서버와 통신하는 것까지 자세하게 알아보겠습니다.
! 파일 첨부가 가능한 태그와 업로드에 필요한 속성은?우리는 파일 첨부를 하기 위하여 input 태그를 사용할 것입니다. 일반적인 type의 경우 file로 설정되어 있음을 확인할 수 있습니다. 아래는 일반적인 파일 첨부를 위한 input 태그의 모습입니다.
<input type="file" name="filename" />
사실 파일첨부에서 가장 중요한 것은 파일 첨부가 가능한 태그 요소인 바로 input 태그입니다. 그중에서도 다중 선택을 하기위해서는 필요한 속성이 있는데 바로 HTML5에 포함되 있는 multiple 속성이 적용되어야 합니다. 이 속성이 포함될 경우 위 태그는 다음과 같이 바뀌게 될 것입니다.
<input multiple="multiple" type="file" name="filename[]" />
여기서 multiple 속성을 사용한다고 무조건 여러 파일을 올려야 하는 건 아니며 하나의 파일 업로드 역시 가능합니다. 단지 추가적으로 멀티 업로드를 사용할 수 있게됩니다. 그 다음으로 여기서 가장 중요한 부분 중 하나로 input 태그의 name 속성입니다. name 속성의 값이 배열로 전달되므로 마지막에 배열기호 []를 추가해줍니다.
! input 태그 name 속성의 역할은?
위에 태그를 자세히 보면 뒤의 name 속성의 이름 맨 끝에는 배열을 뜻하는 [] 괄호가 추가되어있습니다. 이 경우 중괄호 []를 추가하게 되면 해당 name속성을 받는 서버 페이지에서 input 태그가 가진 값을 name 속성으로 받을 때 배열로 받아 처리할 수 있게됩니다.파일이 복수개이므로 전달할 파일의 이름 역시 복수로 전달되야 할 것입니다. 이 때문에 name 속성이 [] 과 같이 배열로 바꾸어 전달하게되는 것을 이해하면 될 것 같습니다.
! form 태그의 설정방법 위와 같이 input 태그를 변경하면 당연히 이를 전송할 form 태그 역시 필요할 것입니다. form 태그가 있어야 이를 전달할 input 태그가 제대로 동작하기 때문이죠.
form 태그는 파일 업로드를 위해 일반적인 코드와는 차이점이 있습니다. 그 부분은 우선 아래의 코드를 보면서 알아보겠습니다.
<form action="upload.php" method="post" enctype="multipart/form-data">
<input multiple="multiple" type="file" name="filename[]" />
</form>
<input multiple="multiple" type="file" name="filename[]" />
</form>
여기서는 form 태그에 파일을 업로드를 위하여 추가로 enctype="multipart/form-data"라는 속성과 값을 추가하였습니다. enctype은 파일 인코딩을 설정하며 파일 업로드의 경우 인코딩을 별도 수행하지 않도록 해당하는 위와 같이 값을 전달하도록 합니다.
# 파일 업로드시 드래그를 사용하는 방법 한개의 파일이 아닌 파일 개수가 여러개인 경우 당연히 하나씩 올리는 인터페이스는 매우 불편합니다. 또한 드래그하여 다수의 파일을 한번에 올리는 것이 더 쉽고 효과적인 방법으로 더 사용성이 뛰어난 UI입니다.
멀티 파일을 첨부하기 위해서 아래의 두 가지 방법이 존재합니다.
- 파일을 드래그 목적의 별도 태그 추가
- input 태그의 스타일을 변경, 드래그 가능 영역 확대
각각의 방법에 대하여 알아보겠습니다.
1. 파일을 드래그할 태그 별도로 추가하기
이 경우 파일을 업로드하는 목적의 태그를 별도로 만들어 추가해야합니다. 이 경우 드래그시 발생하는 브라우저 기본 이벤트를 제거해야할 필요가 있습니다. 그렇지 않으면 첨부된 파일을 자동으로 열기 위해서 브라우저가 시도할 것입니다.
이를 막는 간단한 방법은 해당하는 태그에 onchange() 이벤트를 쓰는 것입니다. onchange는 파일이 추가되면 바로 실행되며 설정된 event코드의 실행을 모두 block 기본 이벤트가 동작하지 않게됩니다.
<div onchange="dropfile();">Drap and Drop here.</div>
스크립트는 다음과 같습니다.
var dropFile = function(event) {
event.preventDefault();
}
event.preventDefault();
}
첨부된 파일의 정보는 모두 event 객체에 추가되어 있어 이를 사용하여 첨부합니다.
2. input 태그에 스타일을 사용해 드래그 영역을 넓히는 방법
이 방법은 기존의 input 태그에 별도 CSS를 사용하여 드래그 가능한 영역을 확대하는 것입니다. 이는 input 태그 자체에 드래그가 가능한 점을 이용하는 것입니다.
하지만... 문제는 이 경우 파일 업로드가 가능한 input 태그는 모든 브라우저가 지원하지 않는다는 점입니다. 그래서 최신 브라우저가 아니고 모든 브라우저를 지원해야 한다면 다른 방법을 고려해야 합니다.
일단 이 방법을 사용한다고 가정한 경우 파일을 드래그하여 업로드 하기 위해서는 해당하는 input 태그의 영역을 css를 사용해 강제로 넓게 사용합니다. css를 적용할 경우 다음과 같이 코드가 있어야 커스터마이징이 가능하니 참고하세요.
input {
apperance: none;
-webkit-apperance: none;
}
apperance: none;
-webkit-apperance: none;
}
스타일로 영역을 확대한 경우 이 위에 파일을 드래그하여 위치하면 됩니다. 1번의 경우 스크립트를 사용하여야 하나 가장 간단한 방법은 바로 CSS 스타일을 변경하여 이처럼 사용하는 것입니다.
* 참고사항 - IE 9 이하는 다중 파일 업로드 사용불가
현재 다중 파일 업로드는 IE 10+ 에서만 가능합니다. 이점 꼭 참고하세요.
아래의 글도 찾고 계시지 않나요?
궁금하다~ 양파싹 먹어도 되나요?- 자바스크립트를 사용하여 input 태그에 한글 입력 막기, 한글 불가 방법
[react] antd 라이브러리 Input 컴포넌트- [HTML5] 캔버스 영역을 자바스크립트를 사용하여 base64로 저장하기
[HTML5] Canvas 태그에 투명도 opacity 적용하기- VueJS 라우팅 설정시 # 기호 제거하기, hashbang
- CANVAS 태그에 오브젝트, 도형 이동하는 방법
[HTML5] Canvas 요소의 도형에 클릭 이벤트 사용하는 방법
자바스크립트 ajax를 사용하여 비동기 방식 파일 업로드 예제- input 입력폼 엔터키 누를 경우 submit 막기, prevent